<template>
	<div id="add-edit-dep-manage" class="page-public-s">
		<el-dialog title="test" v-model="props.isUseDialog" draggable :close-on-click-modal="false"
			:close-on-press-escape="false" width="50%" :destroy-on-close="true" @close="closeDialog">

			<el-form :model="formData" ref="ruleFormRef" size="default" label-width="130px" :rules="rules">
				<el-divider content-position="left">人员基本信息</el-divider>
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="人员姓名" prop="empName">
							<el-input v-model="formData.empName" placeholder="请输入" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="部门" prop="orgId">
							<el-select v-model="formData.orgId" placeholder="请选择" style="width: 100%">
								<el-option v-for="item in orgIdList" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="身份证" prop="cardId">
							<el-input v-model="formData.cardId" placeholder="请输入" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="性别">
							<el-radio-group v-model="formData.gender">
								<el-radio :value="1" :label="1">男</el-radio>
								<el-radio :value="2" :label="2">女</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="出生日期">
							<el-date-picker v-model="formData.birthday" format="YYYY/MM/DD" value-format="YYYY-MM-DD"
								type="date" placeholder="请选择" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="联系电话" prop="phone">
							<el-input v-model.number="formData.phone" placeholder="请输入" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="学历">
							<el-select v-model="formData.degrees" placeholder="请选择" style="width: 100%">
								<el-option v-for="item in degreesList" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="所学专业">
							<el-input v-model="formData.major" placeholder="请输入" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="职称">
							<el-select v-model="formData.professionalTitle" placeholder="请选择" style="width: 100%">
								<el-option v-for="item in professionalTitleList" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="入职日期">
							<el-date-picker v-model="formData.InductionDate" type="date" format="YYYY/MM/DD"
								value-format="YYYY-MM-DD" placeholder="请选择" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="岗位">
							<el-select   v-model="formData.posIds" @change="selectMultiple" multiple placeholder="请选择" style="width: 100%">
								<el-option v-for="item in posIdsList" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="是否安全管理人员">
							<el-radio-group v-model="formData.IsSafetyManager">
								<el-radio :value="true" :label="true">是</el-radio>
								<el-radio :value="false" :label="false">否</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="安全管理人员性质">
							<el-radio-group v-model="formData.safetyManagerType">
								<el-radio :value="1" :label="1">兼职</el-radio>
								<el-radio :value="2" :label="2">专职</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="是否特种作业人员">
							<el-radio-group v-model="formData.lsSpecialWork">
								<el-radio :value="true" :label="true">是</el-radio>
								<el-radio :value="false" :label="false">否</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="特种设备操作人员">
							<el-radio-group v-model="formData.lsSpecialDeviceOperator">
								<el-radio :value="true" :label="true">是</el-radio>
								<el-radio :value="false" :label="false">否</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>

			<template #footer>
				<el-button @click="closeDialog">取消</el-button>
				<el-button @click="submitForm(ruleFormRef)" type="primary">提交</el-button>
			</template>
		</el-dialog>
	</div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { sysPosList } from '/@/api/centerControl/pubilc';
import { sysOrgList } from '/@/api/centerControl/oms';
import { FormInstance } from 'element-plus';
import { sysEmpAddEmp, sysEmpUpdateEmp } from '/@/api/centerControl/oms';
const props = defineProps<{
	isUseDialog: boolean;
	repairInfo: string;
}>();

const emits = defineEmits(['cancelUseClick']);
//表单数据
const degreesList = [
	{ label: '博士研究生', value: 10 },
	{ label: '硕士研究生', value: 20 },
	{ label: '大学本科', value: 30 },
	{ label: '大学专科', value: 40 },
	{ label: '中等职业教育', value: 50 },
	{ label: '高中', value: 60 },
	{ label: '初中', value: 70 },
	{ label: '小学', value: 80 },
	{ label: '其他', value: 90 },
]
const professionalTitleList = [
	{ label: '正高', value: 1 },
	{ label: '副高', value: 2 },
	{ label: '中级', value: 3 },
	{ label: '初级', value: 4 },
]
const ruleFormRef = ref();
const formData = reactive({
	id:0,
	empName: '', //姓名
	orgId: '', //部门
	cardId: '', //身份证
	gender: 1, //性别 1=男,2=女,
	birthday: '', //出生日期
	phone: '', //联系电话
	degrees: '', //学历 
	major: '', //所学专业
	professionalTitle: '', //职称 正高 Senior = 1 副高 ViceSenior = 2 中级 Middle = 3  初级 Primary = 4
	// name:'', //职称专业
	InductionDate: '', //入职日期
	posIds: '', //岗位 可多选，请求/sysPos/list
	IsSafetyManager: false, //是否安全管理人员 boolean
	safetyManagerType: 2, //安全管理人员性质 1兼职  2专职
	lsSpecialWork: false, //是否特种作业人员 boolean
	lsSpecialDeviceOperator: false, //是否特种设备操作人员 boolean
	//name:0, //是否注册安全工程师
	//name:0, //是否部门负责人
	// name:'', //岗位职责
	certificateList: [], //证书列表
})
//表单校验
const rules = reactive({
	empName: [{ required: true, message: '不能为空', trigger: 'blur', }],
	orgId: [{ required: true, message: '不能为空', trigger: 'blur', }],
	cardId: [{ required: true, message: '不能为空', trigger: 'blur', }],
	phone: [{ required: true, message: '不能为空', trigger: 'blur', }]
});

const selectMultiple = (item) => {
	console.log(item);
}

//提交数据
const submitForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate(async (valid) => {
		if (valid) {
			if(formData.id){
				sysEmpUpdateEmp(formData).then(()=>{
					closeDialog()
				})
			}else{
				sysEmpAddEmp(formData).then(()=>{
					closeDialog()
				})
			}
		} else {
			console.log('error submit!');
			return false;
		}
	});
};

//关闭弹窗/取消事件
const closeDialog = () => {
	formData.id = 0;
	formData.orgId = ''; //部门
	formData.empName = ''; //姓名
	formData.cardId = ''; //身份证
	formData.gender = 1; //性别
	formData.birthday = ''; //出生日期
	formData.phone = ''; //联系电话
	formData.degrees = ''; //学历
	formData.major = ''; //所学专业
	formData.professionalTitle = ''; //职称
	formData.InductionDate = ''; //入职日期
	formData.posIds = ''; //岗位 可多选
	formData.IsSafetyManager = false; //是否安全管理人员
	formData.safetyManagerType = 2; //安全管理人员性质
	formData.lsSpecialWork = false; //是否特种作业人员
	formData.lsSpecialDeviceOperator = false; //是否特种设备操作人员

	emits('cancelUseClick');
};

const orgIdList = ref();//部门列表
const posIdsList = ref();//岗位列表
onMounted(async () => {
	const res1 = await sysPosList({})
	posIdsList.value = res1.data.map(item => {
		return {
			value: item.id,
			label: item.name,
		}
	})

	const res2 = await sysOrgList({})
	orgIdList.value = res2.data.map(item => {
		return {
			value: item.id,
			label: item.name,
		}
	})
})
</script>
<style scoped lang="scss">
#add-edit-dep-manage {
	:deep(.el-select) {
		width: 100%;
	}

	:deep(.el-input) {
		width: 100%;
	}

	:deep(.el-upload) {
		width: 100%;
	}

	.img-span {
		color: #0052d9;
	}

	.table-s {
		:deep(.el-icon) {
			margin-right: 0px !important;
			margin-left: 12px !important;
		}
	}

	.path_look_sfz {
		display: block;
		width: 100%;
		border: 1px solid #e4e7ed;
		border-radius: 4px;

		span {
			display: block;
			margin-left: 15px;
			color: #606266;
		}
	}

	.upload-d {
		position: relative;
		width: 100%;

		:deep(.el-upload) {
			width: 100%;
		}

		.path_look {
			display: block;
			width: 100%;
			border: 1px solid #e4e7ed;
			border-radius: 4px;
			position: absolute;
			left: 0;
			top: 0;

			span {
				display: block;
				margin-left: 15px;
				color: #606266;
			}
		}

		.upload-in {
			position: absolute;
			left: 0;
			top: 0;
		}

		.select-btn-s {
			position: absolute;
			top: 2px;
			right: 1px;
			z-index: 3;
			margin: 0 !important;
			border: none !important;
			background: rgba(255, 255, 255, 1) !important;
			color: #0052d9 !important;
			height: 28px;
		}

		.select-btn-s:active {
			color: #0052d9 !important;
		}

		.select-btn-s:hover {
			color: #0052d9 !important;
		}

		.upload-b {
			display: flex;
			align-items: center;
			position: absolute;
			top: 10px;
			right: 10px;
			line-height: initial;
			background: unset !important;

			:deep(a) {
				background: unset !important;
				margin-right: 10px;
			}

			:deep(span) {
				background: unset !important;
			}
		}
	}
}
</style>
